<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div class="row">
      <div
        class="row justify-center items-center"
        style="
          width: 200px;
          height: 200px;
          border-radius: 50%;
          background: #f29700;
          box-shadow: 1px 1px 10px #f29700, -1px -1px 10px #f29700;
          margin: 20px 50px 0px 30px;
        "
      >
        <div
          style="
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: #f29700;
            position: relative;
          "
        >
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: white;
              font-size: 18px;
              font-weight: bold;
            "
          >
            <div class="text-center">今日发电量</div>
            <div class="text-center">5324.5</div>
            <div class="text-center">KWh</div>
          </div>
        </div>
      </div>
      <div class="row" style="flex: 1; margin-left: 100px">
        <div class="row" style="width: 50%">
          <img
            style="width: 100px"
            :src="require('src/assets/newIcon/1.png')"
          />
          <div
            class="q-ml-lg"
            style="color: #8c8c8c; font-size: 18px; font-weight: bold"
          >
            <div style="">月发电量（KWh）</div>
            <div>56564.1</div>
            <div style="color: #f29700; font-size: 14px">￥34533.4</div>
          </div>
        </div>
        <div class="row" style="width: 50%">
          <img
            style="width: 100px;height: 90px;"
            :src="require('src/assets/newIcon/2.png')"
          />
          <div
            class="q-ml-lg"
            style="color: #8c8c8c; font-size: 18px; font-weight: bold"
          >
            <div style="">当前功率（KW）</div>
            <div>945.11</div>
          </div>
        </div>
        <div class="row q-mt-lg" style="width: 50%">
          <img
            style="width: 100px"
            :src="require('src/assets/newIcon/3.png')"
          />
          <div
            class="q-ml-lg"
            style="color: #8c8c8c; font-size: 18px; font-weight: bold"
          >
            <div style="">总发电量（KWh）</div>
            <div>256564.1</div>
            <div style="color: #f29700; font-size: 14px">￥134533.4</div>
          </div>
        </div>
        <div class="row q-mt-lg" style="width: 50%">
          <img
            style="width: 100px"
            :src="require('src/assets/newIcon/4.png')"
          />
          <div
            class="q-ml-lg"
            style="color: #8c8c8c; font-size: 18px; font-weight: bold"
          >
            <div style="">总电站数 54</div>
            <div>当前在线 49</div>
            <div style="color: #f29700">告警 2</div>
          </div>
        </div>
      </div>
    </div>
    <div class="greenLine"></div>
    <div class="row items-center">
      <div
        id="lineChart"
        class="test-wrepper"
        :style="[{ width: '80%' }, { height: 500 + 'px' }]"
      ></div>
      <div>
        <q-btn label="年" color="grey" size="md" />
        <q-btn label="月" color="grey" size="md" class="q-ml-xs q-mr-xs" />
        <q-btn label="日" color="primary" size="md" />
        <q-select
          dense
          square 
          v-model="type"
          class="q-mt-md"
          bg-color="primary"
          style="max-width: 200px"
          :options="option"
        >
        </q-select>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import resize from "src/components/mixins/resize.js";

let chart = null;
export default defineComponent({
  mixins: [resize],
  name: "RealTimeState",
  components: {},
  data() {
    return {
      defaultOption: null,
      type: 2023,
      option: [2019, 2021, 2022, 2023],
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    // 初始化echarts实例
    initEcharts(chart) {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      chart = echarts.init(document.getElementById("lineChart"));
      chart.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart.setOption(this.handlerDefaultOption(), true);
      this.chart = chart;
    },
    // 处理echarts配置项
    handlerDefaultOption() {
      this.defaultOption = {
        title: {
          text: "电量统计",
          left: "50%",
          textStyle: {
            color: "#898989",
            fontSize: 18,
          },
        },
        tooltip: {},
        xAxis: {
          data: ["m1", "m2", "m3", "m4", "m5", "m6"],
        },
        yAxis: {
          name: "发电量（KWh）",
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5123, 2012, 3644, 1023, 120, 2410],
            itemStyle:{
              color:'#53D42C'
            }
          },
        ],
      };

      return this.defaultOption;
    },
  },
});
</script>

<style lang="scss" scoped>
</style>
